<!--
* @description 地图位置
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="smartspray-map">
    <el-card class="box-card smartspray-map__panel">
      <el-form>
        <el-form-item>
          <el-radio-group v-model="type" size="small" @change="onTypeChange">
            <el-radio-button label="1">驾车</el-radio-button>
            <el-radio-button label="2">步行</el-radio-button>
            <el-radio-button label="3">公交</el-radio-button>
            <el-radio-button label="4">骑行</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="start-point">
          <el-autocomplete
            v-model="start"
            :fetch-suggestions="querySearchAsync"
            placeholder="起点"
            @select="handleSelectStart"
            style="width:200px"
          ></el-autocomplete>
          <!-- <el-input v-model="start" placeholder="起点" @keyup.native.enter="getRoutes" style="width:240px"></el-input> -->
          <i class="iconfont icon-xianghujiaohuan-shangxia" @click="onExchange"></i>
        </el-form-item>
        <el-form-item>
          <el-autocomplete
            v-model="end"
            :fetch-suggestions="querySearchAsync"
            placeholder="终点"
            @select="handleSelectEnd"
            style="width:200px"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <div class="smartspray-map__routes">
        <div
          v-for="(n,i) in routeList"
          :key="i"
          class="smartspray-map__route d-flex ai-center"
          :class="{ 'is-active':true }"
          @click="renderRoute(n)"
        >
          <div class="smartspray-map__route-content text-left">
            <div>{{n.duration}}</div>
            <div>{{n.distance}}</div>
          </div>
          <i class="el-icon el-icon-arrow-right"></i>
        </div>
      </div>
    </el-card>

    <div class="smartspray-map__body" id="smartsprayMap"></div>
  </div>
</template>

<script>
import { getAddrSuggestion } from '@/api/spray'
let map = ''
let driving = ''
export default {
  components: {},
  props: {
    dataObj: {
      required: true,
    },
  },
  data() {
    return {
      type: '1',
      start: '',
      end: '',
      currentRoute: '',
      routeList: [],
    }
  },

  computed: {},

  created() {
    this.end = this.dataObj.unitAddress
    getAddrSuggestion({
      query: this.end,
    }).then((res) => {
      this.endPoint = res.result[0]
    })
  },

  mounted() {
    this.initMap()
  },

  methods: {
    onTypeChange() {
      this.getRoutes()
    },
    handleSelectStart(val) {
      this.startPoint = val
      this.getRoutes()
    },
    handleSelectEnd(val) {
      this.endPoint = val
      this.getRoutes()
    },
    querySearchAsync(queryString, cb) {
      if (!queryString) return cb([])
      getAddrSuggestion({
        query: queryString,
      }).then((res) => {
        cb(
          res.result.map((n) => {
            n.value = n.name
            return n
          })
        )
      })
    },
    onExchange() {
      let startPoint = this.startPoint
        ? JSON.parse(JSON.stringify(this.startPoint))
        : ''
      let endPoint = this.endPoint
        ? JSON.parse(JSON.stringify(this.endPoint))
        : ''
      let start = this.start + ''
      this.start = this.end + ''
      this.end = start
      this.startPoint = endPoint
      this.endPoint = startPoint
      this.getRoutes()
    },
    initMap() {
      map = new BMap.Map('smartsprayMap', {
        coordsType: 5, // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
        // 指定完成后API将以指定的坐标类型处理您传入的坐标
      }) // 创建地图实例
      var point = new BMap.Point(121.040676, 31.344822) // 创建点坐标
      map.centerAndZoom(point, 15)
    },
    getRoutes() {
      if (!this.startPoint || !this.endPoint) return
      if (driving) driving.clearResults()
      let method = [
        '',
        'DrivingRoute',
        'WalkingRoute',
        'TransitRoute',
        'RidingRoute',
      ][this.type]
      driving = new BMap[method](map, {
        renderOptions: {
          map: map,
          autoViewport: true,
        },
        onSearchComplete: (res) => {
          this.onSearchComplete(res, driving)
        },
      })
      var start = new BMap.Point(
        this.startPoint.location.lng,
        this.startPoint.location.lat
      )
      var end = new BMap.Point(
        this.endPoint.location.lng,
        this.endPoint.location.lat
      )
      driving.search(start, end)
    },
    renderRoute(val) {
      this.currentRoute = val
    },
    onSearchComplete(results, driving) {
      if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
        var plan = results.getPlan(0)
        this.routeList = [
          {
            duration: plan.getDuration(true),
            distance: plan.getDistance(true),
          },
        ]
      }
    },
  },
}
</script>
<style lang='scss'>
.smartspray-map {
  position: relative;
  .start-point {
    position: relative;
    margin-bottom: 5px;
    .iconfont {
      position: absolute;
      top: 50%;
      right: 0px;
      width: 40px;
      height: 40px;
      font-size: 40px;
      cursor: pointer;
      color: #999;
      &:hover {
        color: rgba(68, 107, 222, 1);
      }
    }
  }
  &__panel {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    width: 280px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9;
  }
  &__route {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 5px;
    color: #333;
    cursor: pointer;
    &-content {
      flex: 1;
      margin-right: 10px;
    }
    &:hover,
    &.is-active {
      background: #409eff;
      border-color: #409eff;
      color: #fff;
    }
  }
  &__body {
    width: 100%;
    height: 458px;
  }
}
</style>